<template>
    <div>
        <!-- 查询和其他操作 -->
        <div class="filter-container" style="margin: 10px 0 10px 0;">

            <el-cascader :options="options" placeholder="请选择菜单名" v-model="keyword" :props="{ checkStrictly: true }"
                clearable style="margin-left: 10px;"></el-cascader>

            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFind"
                v-permission="'/categoryMenu/getList'" style="margin-left: 10px;">查找</el-button>
            <el-button class="filter-item" type="primary" @click="handleAdd" icon="el-icon-edit"
                v-permission="'/categoryMenu/add'">添加接口</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">

            <el-table-column type="expand">
                <template slot-scope="scope">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-table :data="scope.row.childCategoryMenu" :show-header="showHeader" style="width: 100%">

                            <el-table-column label width="60" align="center">
                                <template slot-scope="scope_child">
                                    <span>{{ scope_child.$index + 1 }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label width="150" align="center">
                                <template slot-scope="scope_child">
                                    <span>{{ scope_child.row.name }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label width="100" align="center">
                                <template slot-scope="scope_child">
                                    <el-tag v-for="item in menuLevelDictList" :key="item.uid"
                                        v-if="scope_child.row.menuLevel == item.dictValue" :type="item.listClass">{{
                                            item.dictLabel }}</el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column label width="100" align="center">
                                <template slot-scope="scope">
                                    <el-tag v-for="item in menuTypeDictList" :key="item.uid"
                                        v-if="scope.row.menuType == item.dictValue" :type="item.listClass">{{ item.dictLabel
                                        }}</el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column label width="250" align="center">
                                <template slot-scope="scope_child">
                                    <span>{{ scope_child.row.summary }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column label width="100" align="center">
                                <template slot-scope="scope_child">
                                    <span>{{ scope_child.row.icon }}</span>
                                    <i :class="scope_child.row.icon" />
                                </template>
                            </el-table-column>

                            <el-table-column label width="200" align="center">
                                <template slot-scope="scope_child">
                                    <span>{{ scope_child.row.url }}</span>
                                </template>
                            </el-table-column>

                            <el-table-column width="100" align="center">
                                <template slot-scope="scope">
                                    <el-tag v-for="item in yesNoDictList" :key="item.uid"
                                        v-if="scope.row.isShow == item.dictValue" :type="item.listClass">{{ item.dictLabel
                                        }}</el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column width="100" align="center">
                                <template slot-scope="scope">
                                    <el-tag type="warning">{{ scope.row.sort }}</el-tag>
                                </template>
                            </el-table-column>

                            <el-table-column label width="100" align="center">
                                <template slot-scope="scope_child">
                                    <template v-if="scope_child.row.status == 1">
                                        <span>正常</span>
                                    </template>
                                    <template v-if="scope_child.row.status == 2">
                                        <span>推荐</span>
                                    </template>
                                    <template v-if="scope_child.row.status == 0">
                                        <span>已删除</span>
                                    </template>
                                </template>
                            </el-table-column>

                            <el-table-column fixed="right" min-width="230" align="center">
                                <template slot-scope="scope_child">
                                    <el-button @click="handleStick(scope_child.row)" type="warning" size="small"
                                        v-permission="'/categoryMenu/stick'">置顶</el-button>
                                    <el-button @click="handleEdit(scope.row, scope_child.row)" type="primary" size="small"
                                        v-permission="'/categoryMenu/edit'">编辑</el-button>
                                    <el-button @click="handleDelete(scope_child.row)" type="danger" size="small"
                                        v-permission="'/categoryMenu/delete'">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form>
                </template>
            </el-table-column>


            <el-table-column label="序号" width="60" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="菜单名称" width="150" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.name }}</span>
                </template>
            </el-table-column>

            <el-table-column label="菜单级别" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag v-for="item in menuLevelDictList" :key="item.uid" v-if="scope.row.menuLevel == item.dictValue"
                        :type="item.listClass">{{ item.dictLabel }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="菜单类型" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag v-for="item in menuTypeDictList" :key="item.uid" v-if="scope.row.menuType == item.dictValue"
                        :type="item.listClass">{{ item.dictLabel }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="菜单简介" width="250" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.summary }}</span>
                </template>
            </el-table-column>

            <el-table-column label="图标" width="100" align="center">
                <template slot-scope="scope">
                    <i :class="scope.row.icon"></i>
                </template>
            </el-table-column>

            <el-table-column label="路由" width="200" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.url }}</span>
                </template>
            </el-table-column>

            <el-table-column label="是否显示" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag v-for="item in yesNoDictList" :key="item.uid" v-if="scope.row.isShow == item.dictValue"
                        :type="item.listClass">{{ item.dictLabel }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="排序" width="100" align="center">
                <template slot-scope="scope">
                    <el-tag type="warning">{{ scope.row.sort }}</el-tag>
                </template>
            </el-table-column>

            <el-table-column label="状态" width="100" align="center">
                <template slot-scope="scope">
                    <template v-if="scope.row.status == 1">
                        <span>正常</span>
                    </template>
                    <template v-if="scope.row.status == 2">
                        <span>推荐</span>
                    </template>
                    <template v-if="scope.row.status == 0">
                        <span>已删除</span>
                    </template>
                </template>
            </el-table-column>

            <!-- <el-table-column label="操作" fixed="right" min-width="270">
                <template slot-scope="scope">

                </template>
            </el-table-column> -->


        </el-table>
    </div>
</template>

<script>
import {
    getAllMenu,
    getButtonAll,
    addMenu,
    editMenu,
    deleteMenu,
    stickMenu
} from "@/api/categoryMenu";
import { getListByDictTypeList } from "@/api/sysDictData"

export default {
    name: '',
    created() {
        // 得到菜单列表
        this.menuList()
        this.getDictList();
        this.buttonList();
    },
    data() {
        return {
            showHeader: false, //是否显示表头
            tableData: [],
            keyword: [],
            menuLevel: "",
            currentPage: 1,
            pageSize: 10,
            total: 0, //总数量
            title: "增加接口",
            dialogFormVisible: false, //控制弹出框
            formLabelWidth: "120px",
            isEditForm: false,
            menuLevelDictList: [], //菜单等级字典
            yesNoDictList: [], // 是否字典
            menuTypeDictList: [], //菜单类型字典
            yesNoDefault: null, // 是否 默认值
            menuTypeDefault: null, // 菜单类型默认值
            buttonParentUid: [], // 选中的button父UID
            form: {
                uid: null,
                name: "",
                summary: "",
                icon: "",
                url: "",
                sort: 0
            },
            loading: false,
            rules: {
                name: [
                    { required: true, message: '菜单名称不能为空', trigger: 'blur' },
                    { min: 1, max: 20, message: '长度在1到20个字符' },
                ],
                menuLevel: [
                    { required: true, message: '菜单等级不能为空', trigger: 'blur' }
                ],
                parentUid: [
                    { required: true, message: '父菜单名不能为空', trigger: 'blur' }
                ],
                summary: [
                    { required: true, message: '菜单简介不能为空', trigger: 'blur' }
                ],
                icon: [
                    { required: true, message: '图标不能为空', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: 'URL不能为空', trigger: 'blur' }
                ],
                isShow: [
                    { required: true, message: '显示字段不能为空', trigger: 'blur' }
                ],
                sort: [
                    { required: true, message: '排序字段不能为空', trigger: 'blur' },
                    { pattern: /^[0-9]\d*$/, message: '排序字段只能为自然数' },
                ],
            },
            options: []
        };
    },
    methods: {
        menuList() {
            getAllMenu({ keyword: '' }).then(res => {
                if (res.code == 200) {
                    let tableData = res.data.records;
                    let options = []
                    for (let a = 0; a < tableData.length; a++) {
                        let parent = {}
                        parent.label = tableData[a].name
                        parent.value = tableData[a].uid
                        let childData = tableData[a].childCategoryMenu
                        let childList = []
                        for (let b = 0; b < childData.length; b++) {
                            let child = {}
                            child.label = childData[b].name
                            child.value = childData[b].uid
                            childList.push(child)
                        }
                        parent.children = childList
                        options.push(parent)
                    }
                    this.options = options
                }
            })
        },
        getDictList() {
            let dictTypeList = ['sys_menu_level', 'sys_yes_no', 'sys_menu_type']
            getListByDictTypeList(dictTypeList).then(res => {
                if (res.code == 200) {
                    let dictMap = res.data;
                    this.menuLevelDictList = dictMap.sys_menu_level

                    this.yesNoDictList = dictMap.sys_yes_no

                    this.menuTypeDictList = dictMap.sys_menu_type

                    if (dictMap.sys_yes_no.defaultValue) {
                        this.yesNoDefault = parseInt(dictMap.sys_yes_no.defaultValue);
                    }

                    if (dictMap.sys_menu_type.defaultValue) {
                        this.menuTypeDefault = parseInt(dictMap.sys_menu_type.defaultValue);
                    }

                }
            })

        },
        buttonList() {
            let params = {}
            let keyword = this.keyword
            if (keyword.length > 0) {
                // 选取最后一个元素
                params.keyword = keyword[keyword.length - 1]
            }
            getButtonAll(params).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.records
                }
            })
        },
        handleFind() {
            this.buttonList();
        },
        handleAdd() {

        },
        handleStick() {

        },
        handleDelete() {

        }
    }
}
</script>

<style scoped>
.demo-table-expand {
    font-size: 0;
}

.demo-table-expand label {
    width: 90px;
    color: #99a9bf;
}

.demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
}
</style>